<template>
  <view>
    <Mynavbar
      title="营销"
      leftcolor="#fff"
      :placeholder="true"
      color="#000"
      bgColor="#fff"
    />
    <view class="marketing">
      <view class="A">
        <view class="top">
          <view class="title">流量情况</view>
          <view class="btn">
            <view
              :class="['btn_i', type.a ? 'noshow' : '']"
              @click="echartsShow(1)"
            >
              <view class="text">分享获客</view>
              <view class="circularRing"></view>
            </view>
            <view
              :class="['btn_i', type.b ? 'noshow' : '']"
              @click="echartsShow(2)"
            >
              <view class="text">平台引流</view>
              <view class="circularRing" style="border-color:#8c55ff"></view>
            </view>
          </view>
        </view>
        <view class="echarts-wrap">
          <MyEcharts
            id="mychart-dom-bar"
            canvas-id="mychart-bar"
            :echarts="echarts"
            :onInit="initChart"
          ></MyEcharts>
        </view>
      </view>
      <view class="B">
        <view class="top">
          <view class="title">领券情况</view>
          <view class="btn">
            <view
              :class="['btn_i', typeB.b ? 'noshow' : '']"
              @click="echartsShowB(1)"
            >
              <view class="text">领券数</view>
            </view>
            <view
              :class="['btn_i', typeB.a ? 'noshow' : '']"
              @click="echartsShowB(2)"
            >
              <view class="text">核销数</view>
            </view>
          </view>
        </view>
        <view class="echarts-wrap">
          <MyEcharts
            id="mychart-dom-bar"
            canvas-id="mychart-barB"
            :echarts="echarts"
            :onInit="initChartB"
          ></MyEcharts>
        </view>
      </view>
    </view>
    <Tabs />
  </view>
</template>

<script>
import Tabs from '../../components/tabs.vue'
import Mynavbar from '../../components/Mynavbar.vue'
import * as echarts from '../../subpackages/components/echarts.min.js'
import MyEcharts from '../../components/src/echarts.vue'
let chartA = null
let chartB = null
export default {
  components: { Tabs, Mynavbar, MyEcharts },
  data () {
    return {
      type: {
        a: false,
        b: false
      },
      typeB: {
        a: false,
        b: false
      },
      temporary: [],
      temporaryB: []
    }
  },
  onReady () {
    this.upDataBychartA(7, 1)
    this.upDataBychartB()
  },
  methods: {
    initChart (canvas, width, height) {
      chartA = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      var option = {
        grid: {
          // 让图表占满容器
          top: '10rpx',
          left: '30rpx',
          right: '0prx',
          bottom: '20rpx'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '分享获客',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210].reverse(),
            color: '#2E5BFF',
            itemStyle: {
              normal: {
                label: {
                  color: '#2E5BFF'
                }
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#d7dffc'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.1)'
                }
              ])
            }
          },
          {
            name: '平台引流',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            color: '#8C54FF',
            itemStyle: {
              normal: {
                label: {
                  color: '#8C54FF'
                }
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#e9deff'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0.1)'
                }
              ])
            }
          }
        ]
      }
      chartA.setOption(option)
      return chartA
    },
    async upDataBychartA (day, current) {
      this.current = current
      const res = await this.$api.home.UvDetail(day)
      const options = chartA.getOption()
      options.xAxis[0].data = res.data.share
        .map(v => `${v.date.split('-')[1]}-${v.date.split('-')[2]}日`)
        .reverse()
      options.series[0].data = res.data.share.map(v => v.uv).reverse()
      options.series[1].data = res.data.platform.map(v => v.uv).reverse()
      this.temporary = [options.series[0].data, options.series[1].data]
      this.type.a = false
      this.type.b = false
      chartA.setOption(options)
    },
    echartsShow (type) {
      const options = chartA.getOption()
      if (type === 1) {
        this.type.a = !this.type.a
        options.series[0].data = this.type.a ? [] : this.temporary[0]
      } else if (type === 2) {
        this.type.b = !this.type.b
        options.series[1].data = this.type.b ? [] : this.temporary[1]
      }
      chartA.setOption(options)
    },

    initChartB (canvas, width, height) {
      chartB = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      var option = {
        grid: {
          // 让图表占满容器
          top: '10rpx',
          left: '30rpx',
          right: '0prx',
          bottom: '20rpx'
        },
        dataset: {
          dimensions: ['核销数', '领券数'],
          source: []
        },
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: '核销数',
            type: 'bar',
            data: [],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#ffe37a'
              },
              {
                offset: 1,
                color: '#feb13c'
              }
            ])
          },
          {
            name: '领券数',
            type: 'bar',
            data: [],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#77b1fe'
              },
              {
                offset: 1,
                color: '#2e79fe'
              }
            ])
          }
        ]
      }
      chartB.setOption(option)
      return chartB
    },
    async upDataBychartB () {
      const res = await this.$api.home.couponDetail()
      const options = chartB.getOption()
      options.xAxis[0].data = res.data.map(v => v.month + '月')
      options.series[0].data = res.data.map(v => v.cancel_num)
      options.series[1].data = res.data.map(v => v.num)
      this.temporaryB = [options.series[0].data, options.series[1].data]
      chartB.setOption(options)
    },
    echartsShowB (type) {
      const options = chartB.getOption()
      if (type === 2) {
        this.typeB.a = !this.typeB.a
        options.series[0].data = this.typeB.a ? [] : this.temporaryB[0]
      } else if (type === 1) {
        this.typeB.b = !this.typeB.b
        options.series[1].data = this.typeB.b ? [] : this.temporaryB[1]
      }
      chartB.setOption(options)
    }
  }
}
</script>

<style lang="less" scoped>
.marketing {
  padding: 30rpx;
  .A {
    box-shadow: 0 1rpx 14rpx 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 500rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    .echarts-wrap {
      width: 100%;
      height: 390rpx;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
        letter-spacing: 2rpx;
      }
      .current {
        color: #5176ff;
      }
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 20rpx 0;
      .btn_i {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20rpx;
        .text {
          font-size: 20rpx;
          letter-spacing: 4rpx;
          color: #333333;
          transition: all 0.3s;
        }
        .circularRing {
          width: 25rpx;
          height: 25rpx;
          background-color: #fff;
          border-radius: 50%;
          border: 6rpx solid #5176ff;
          margin-left: 10rpx;
          position: relative;
          transition: all 0.3s;
        }
      }
      .noshow {
        .text {
          color: #f0f0f0;
        }
        .circularRing {
          border-color: #f0f0f0 !important;
        }
      }
    }
  }
  .B {
    box-shadow: 0 1rpx 14rpx 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 500rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    .echarts-wrap {
      width: 100%;
      height: 355rpx;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
        letter-spacing: 2rpx;
      }
      .current {
        color: #5176ff;
      }
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 20rpx 0;
      .btn_i {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20rpx;
        padding: 10rpx;
        border-radius: 30rpx;
        background: linear-gradient(180deg, #7bb4fe, #2a76fe);
        &:nth-child(2) {
          background: linear-gradient(180deg, #ffe47b, #feaf3a);
        }
        .text {
          font-size: 20rpx;
          letter-spacing: 4rpx;
          color: #fff;
          transition: all 0.3s;
        }
      }
      .noshow {
        background: #f0f0f0 !important;
        .text {
          color: #f0f0f0;
        }
      }
    }
  }
}
</style>
